<template>
  <div>
    <nav-bar :title="title" :isShow="false"></nav-bar>
    <van-cell title="优惠卡" size="large" />
    <div class="img_outer">
      <van-image width="100%" height="150" :src="card.r_card_image" />
    </div>
    <van-cell title="所属商家" :value="card.retailer_name" />
    <van-cell title="优惠卡" :value="card.r_card_name" />
    <van-cell title="面值" :value="card.r_card_amount + ' 元'" />
    <van-cell title="可用数量" :value="card.r_count + ' 张'" />
    <van-form @submit="onSubmit" v-if="bConsume">
      <van-field name="count" label="消费数量">
        <template #input>
          <van-stepper v-model="count" :max="card.r_count" />
        </template>
      </van-field>
      <div style="margin: 32px 64px">
        <van-button round block type="info" native-type="submit"
          >生产消费二维码</van-button
        >
      </div>
    </van-form>
    <div style="margin: 32px 64px" v-if="!bConsume">
      <van-button round block type="info" @click="bConsume = true"
        >去消费</van-button
      >
    </div>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import { getWxuserGiftCardById } from "@/api/card";

export default {
  name: "GiftCardDetail",
  components: {
    NavBar,
  },
  computed: {},
  props: ["retailer_id", "card_id"],
  data() {
    return {
      title: this.$route.meta.title,
      count: 1,
      openid: localStorage.getItem("openid"),
      bConsume: false,
      card: {
        retailer_name: "",
        r_card_name: "",
        r_card_image: null,
        r_card_amount: null,
        count: null,
      },
    };
  },
  mounted() {
    this.userGiftCard();
  },
  methods: {
    goConsume() {
      this.$router.push("/card");
    },
    onSubmit(values) {
      console.log(this.count, this.card.rcard_amount);
      this.$dialog
        .confirm({
          title: "优惠卡消费确认",
          message: `消费数量: ${values["count"]} 张<br>总金额为: ${
            this.count * this.card.r_card_amount
          } 元`,
        })
        .then(() => {
          this.$router.push({
            name: "ClientCardQrCode",
            params: { card_id: this.card_id },
            query: { count: this.count, openid: this.openid },
          });
        })
        .catch(() => {});
    },
    userGiftCard() {
      getWxuserGiftCardById(this.card_id)
        .then((res) => {
          const data = res.data;
          console.log(data);
          this.card = data;
        })
        .catch((error) => {
          this.$toast("失败:" + error);
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 20px;
  margin-top: 5px;
  display: flex;
  justify-content: center;
}
.title {
  text-align: center;
  margin: 0;
}
.points {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background-color: #f2f3f5;
}
.van-field__label {
  color: black;
}
.van-col {
  margin: 5px;
  padding: 0px;
}
</style>